{% extends 'layout.html' %}

{% block content %}
    <div class="container">
        <div style="margin-bottom: 10px">
            <a class="btn btn-success" href="/record/add/">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                新建签到
            </a>
            <button class="btn btn-download btn-success">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                导出数据
            </button>

            <div style="float: right;width: 300px;">
                <form method="get">
                    <div class="input-group">
                        <input type="text" name="q" class="form-control" placeholder="关键字"
                               value="{{ search_data }}">
                        <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        </button>
                      </span>
                    </div>
                </form>
            </div>
        </div>
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                签到记录
            </div>

            <!-- Table -->
            <table class="table table-hover table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>签到时间</th>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>所属部门</th>
                    <th>IP地址</th>
                    <th>是否人脸</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for obj in queryset %}
                    <tr>
                        <th>{{ obj.id }}</th>
                        <th>{{ obj.signin_time }}</th>
                        <td>{{ obj.user_info.sid }}</td>
                        <td>{{ obj.user_info.name }}</td>
                        <td>{{ obj.user_info.get_gender_display }}</td>
                        <td>{{ obj.user_info.depart.title }}</td>
                        <td>{{ obj.ip }}</td>
                        <td>{{ obj.get_is_face_display }}</td>
                        <td>
                            <a style="text-decoration:none;" href="/record/{{ obj.id }}/edit/">
                                <input uid="{{ obj.id }}" type="button" class="btn btn-primary btn-xs btn-edit"
                                       value="编辑">
                            </a>
                            <input uid="{{ obj.id }}" class="btn btn-primary btn-danger btn-xs btn-delete" type="button"
                                   value="删除">
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>

        <ul class="pagination">
            {{ page_string }}
        </ul>
    </div>

    <!-- 删除（对话框） -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">

            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <h4>是否确定删除？</h4>
                <p style="margin: 10px 0;"> 删除后，所有关联的相关数据都会被删除。</p>
                <p style="text-align: right;">
                    <button id="btnConfirmDelete" type="button" class="btn btn-danger">确 定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                </p>
            </div>

        </div>
    </div>

    <!-- 导出数据（对话框） -->

    <div class="modal fade" id="recordDown" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">请输入导出数据的范围：</h4>
                </div>
                <form method="get" action="/record/download/excel/">
                    <div class="modal-body">
                        <input type="number" name="time" class="form-control" placeholder="天数">
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">确定</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

{% endblock %}


{% block js %}
    <script type="text/javascript">
        var DELETE_ID;
        $(function () {
            // 当页面的框架加载完成之后，自动就执行。
            bindBtnDownEvent();
            bindBtnDeleteEvent();
            bindBtnConfirmDeleteEvent();
        })

        function bindBtnDeleteEvent() {
            $(".btn-delete").click(function () {
                // alert("点击了删除");
                // 显示删除对话框
                $("#deleteModal").modal('show');

                // 获取当前行的ID并赋值给全部变量。
                DELETE_ID = $(this).attr("uid");
            });
        }

        function bindBtnDownEvent() {
            $(".btn-download").click(function () {
                // 显示对话框
                $("#recordDown").modal('show');
            });
        }

        function bindBtnConfirmDeleteEvent() {
            $("#btnConfirmDelete").click(function () {
                $.ajax({
                    url: "/record/delete/",  //    => /record/delete/?uid=123
                    type: "GET",
                    data: {
                        uid: DELETE_ID
                    },
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            // 隐藏删除框
                            // $("#deleteModal").modal('hide');
                            // 在页面上将当前一行数据删除（js）
                            // $("tr[uid='" + DELETE_ID + "']").remove();
                            // 要删除的ID制空
                            // DELETE_ID = 0;
                            // 简单的思路：
                            location.reload();
                        } else {
                            // 删除失败
                            alert(res.error);
                        }
                    }
                })
            });
        }
    </script>
{% endblock %}